

<!-- Google Analytics Lines -->
	<script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-34830088-1']);
      _gaq.push(['_setDomainName', 'sportsballworld.com']);
      _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>


<style type="text/css">
	#left_content {
		position:absolute;
		top:30px;
		left:0px;
		width:630px;
		height:500px;
		z-index:100;
	}
	
	#right_content {
		position:absolute;
		top:50px;
		left:630px;
		width:334px;
		height:500px;
		z-index:100;
		overflow:hidden;
	}
	
	#bar_content {
		position:absolute;
		left:625px;
		top:30px;
		z-index:110;
	}
	
	#button_up_content {
		position:absolute;
		top:50px;
		left:15px;
		z-index:110;
		cursor:pointer;
		display:none;
	}
	
	#button_down_content {
		position:absolute;
		top:400px;
		left:15px;
		z-index:110;
		cursor:pointer;
		display:none;
	}
	
	#display_content {
		width:640px;
		height:500px;
		position:absolute;
		z-index:100px;
		left:-10px;
	}
	
	.thumbnails_content {
		width:280px;
		height:70px;
		margin-left:50px;
		margin-top:30px;
		cursor:pointer;
	}
	
	.thumbnail_background {
		position:absolute;
		z-index:100;
	}
	
	.thumbnail{
		position:absolute;
		z-index:110;
		margin-left:4px;
		margin-top:3px;
	}
	
	.thumbnail_text {
		position:absolute;
		left: 180px;
		width:140px;
		height:80px;
		overflow:hidden;
		z-index:110;
		font-family:Arial, Helvetica, sans-serif;
		font-size:13px;
		color:#FFF;
		
	}
	
	.thumbnail_content_background {
		width:280px;
		height:75px;
		left:45px;
		margin-top:-2px;
		padding-left:5px;
		position:absolute;
		border-bottom-left-radius:10px;
		border-bottom-right-radius:10px;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
		z-index:50;
	
		background-color:#00C;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
		filter: alpha(opacity=30);
		opacity: .3;
	}
	


</style>

<!--[if IE 7]>
<style type="text/css">
	.thumbnail{
		left:45px;
	}
    .thumbnail_background {
		left:45px;
	}
</style>

<![endif]-->


<script>
	
	$(document).ready(function(e){
		
		$('#left_content').load('interview/content/content1.html');
		
		$("#button_down_content").click(function () {
			var tamanio = parseInt($('#all_thumbsnails').css('height'));
			var margen = parseInt($('#all_thumbsnails').css('marginTop'));
			
			if(tamanio+margen>400){
				$('#all_thumbsnails').animate({ "marginTop": "-=100px" }, 500);
			}
		});
		
		$("#button_up_content").click(function () {
			if(parseInt($('#all_thumbsnails').css('marginTop'))<0){
				$('#all_thumbsnails').animate({ "marginTop": "+=100px" }, 500);
			}
		});
		
		$('.thumbnails_content').click(function(e) {
			var separate = this.id.split("_");
			if( isMobile.any() && separate[1] == 'content2' ) {
				window.location.href='photo-interview-device.php';
			} else {
				var content = 'interview/content/'+separate[1]+'.html';	
				changeFrameInterview(content);
				cambiar_color(separate[0]+'_content_background');
			}
		});
	});

	function cambiar_color(id){
		$('.thumbnail_content_background').removeClass('thumbnail_content_background');
		$('#'+id).addClass('thumbnail_content_background');
		
	}

	function changeFrameInterview(source) {
			$('#left_content').slideUp(500);
			setTimeout(function(){
				$('#left_content').html("");
				$('#left_content').load(source);
     			$('#left_content').slideDown(800);
			},800);
		}
		
		$(document).unload(function(e) {
            $('#right_content').html('');
			$('#bar_content').html('');
        });
</script>


	<div id="left_content">    	
    	<!--<iframe id="display_content" frameborder="0" scrolling="no" src="content/content1.html"></iframe>-->
        
        

    </div>
    
    <div id="bar_content">
    	<img src="images/separe_bar.png" width="12" height="508" alt="sep_bar" />
    </div>
    
    <div id="right_content">
    <!--buttons up and down-->
    	<div id="button_up_content">
        	<img src="images/button_arrow_up.png" width="15" height="16" alt="up" />
        </div>        
        <div id="button_down_content">
        	<img src="images/button_arrow_down.png" width="15" height="16" alt="down" />
        </div>
        <div id="all_thumbsnails">
            <div id="thumbnail1_content1" class="thumbnails_content">
            	<div id="thumbnail1_background" class="thumbnail_background">
                	<img src="images/web-player-background.png" width="120" height="70"/>
                </div>
                <div id="thumbnail1" class="thumbnail">
                	<img src="images/thumbs/n1.png" width="113" height="65" />
                </div>
                <div id="thumbnail1_text" class="thumbnail_text">
                	<p>STAN LEE&rsquo;S INTERVIEW</p>
                </div>
                <div id="thumbnail1_content_background" class="thumbnail_content_background"></div>
            </div>
            
            <div id="thumbnail2_content2" class="thumbnails_content">
            	<div id="thumbnail1_background" class="thumbnail_background">
                	<img src="images/web-player-background.png" width="120" height="70"/>
                </div>
                <div id="thumbnail2" class="thumbnail">
                	<img src="images/thumbs/n2.png" width="65" height="65" style="margin-left:24px" />
                </div>
                <div id="thumbnail2_text" class="thumbnail_text">
                	<p>INTERVIEW BACKSTAGE PIX</p>
                </div>
                <div id="thumbnail2_content_background"></div>
            </div>
            
		</div>    
    </div>

